<template>
	<view class="content">
		<!-- 作业员 -->
		<z-paging ref="paging" v-model="ListData" @query="queryList">
			<template #top>
				<u-navbar :fixed="false" :title="moduleName" :autoBack="true" :safeAreaInsetTop="true"
					leftIconColor="#fff"></u-navbar>

				<view class="SearchBox">
					<u-search :showAction="true" v-model="searchValue" shape="square" actionText="+" @search="OnSearch"
						@clear="OnSearch" @custom="AddBtn" :actionStyle="{color:'#fff',fontSize: '40px'}"
						placeholder="请查询作业员名称" :animation="false"></u-search>
				</view>
			</template>



			<view class="content_main">
				<u-cell v-for="item in ListData" :key="item.EmplID" :title="item.EmplName + ' | ' + item.EmplCode"
					:titleStyle="{fontSize: '16px',color: '#333',fontWeight: 600}" size="large" :clickable="true">

					<template #value>
						<!-- <uni-icons @click="EditBtn(item)" style="font-weight: 600;" color="#51d0d0"
							custom-prefix="iconfont" type="icon-Edit" size="20px"></uni-icons> -->

						<uni-icons @click="EditBtn(item)" style="font-weight: 600;" color="#51d0d0"
							size="20px">{{$utils.toUniCode('&#xe657;')}}</uni-icons>
					</template>
				</u-cell>

			</view>
		</z-paging>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				moduleName: '',
				searchValue: '', // 搜索框

				ListData: [], // 列表数据
			};
		},
		onLoad(option) {
			let that = this;

			that.moduleName = option.Module;
		},
		mounted() {
			let that = this;
			uni.$on('Refresh_Product', function(ret) {
				that.OnSearch();
			})
		},
		onUnload() { // 监听页面卸载,
			uni.$off('Refresh_Product')
		},
		methods: {
			OnSearch() {
				this.$refs.paging.reload();
			},
			queryList(pageNo) {
				let that = this;
				console.log(pageNo)

				this.$utils.showLoading();
				let obj = {
					EmplCode: that.searchValue,
					Pageindex: pageNo,
					PageSize: 30
				};

				that.Request.request('XGD_Employee', obj, function(ret) {
					if (ret.status == 200) {
						that.$refs.paging.complete(ret.data.ds);
						that.$utils.hideLoading(200);
					}
				})
			},
			AddBtn() { // 添加
				uni.navigateTo({
					url: './operator_AddorEdit?Type=add'
				})
			},
			EditBtn(data) { // 编辑

				this.$store.commit('TicketModule/ChangeAndSetStateData', {
					Name1: 'EditDataInfo',
					data: data
				});

				uni.navigateTo({
					url: './operator_AddorEdit?Type=edit'
				})
			},
		}
	}
</script>

<style lang="scss">
	.content {
		// height: 100vh;

		.SearchBox {
			// background-color: #fff;
			background-color: $main-background-color;
			padding: 6px 10px;
		}
	}

	.content_main {

		.u-grid-item {
			margin-top: 40rpx;

			.grid_card {
				width: 90%;
				height: 150rpx;
				background-color: #585858;
				border-radius: 16rpx;
				font-size: 28rpx;
				font-weight: 600;
				color: #fff;
			}
		}
	}
</style>